<template>
	<view>
		<view class="action  margin-lr text-bold margin-tb">
			<text class="cuIcon-must text-red xs"></text>
			<text class="cu">投诉建议标题</text>
		</view>
		<view class="cu-form-group margin-lr" style="background-color: #f9faf9;">
			<input placeholder="请准确填写标题，言简意赅，不超过25字" maxlength="25" name="input"></input>
		</view>
		
		<view class="action  margin-lr text-bold margin-tb">
			<text class="cuIcon-must text-red xs"></text>
			<text class="cu">事件描述</text>
		</view>
		<view class="cu-form-group margin-lr" style="background-color: #f9faf9;">
			<textarea maxlength="500" :disabled="modalName!=null" @input="textareaAInput" placeholder="多行文本输入框"></textarea>
		</view>
		
		<view class="action  margin-lr text-bold margin-tb">
			<text class="cuIcon-must text-red xs"></text>
			<text class="cu">事件时间</text>
		</view>
		<view class="cu-form-group margin-lr" style="background-color: #f9faf9;">
			<picker mode="date" :value="date" start="2023-01-01" end="2028-09-01" @change="DateChange">
				<view class="picker">
					{{date}}
				</view>
			</picker>
		</view>
		
		<view class="action  margin-lr text-bold margin-tb">
			<text class="cuIcon-must text-red xs"></text>
			<text class="cu">投诉部门</text>
		</view>
		<view class="cu-form-group margin-lr" style="background-color: #f9faf9;">
			<input placeholder="请填写投诉部门" name="input"></input>
		</view>
		
		<view class="action  margin-lr text-bold margin-tb">
			<!-- <text class="cuIcon-must text-red xs"></text> -->
			<text class="cu">附件上传</text>
		</view>
		
		<view class="cu-form-group" >
			<view class="grid col-4 grid-square flex-sub" >
				<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
				 <image :src="imgList[index]" mode="aspectFill" style="background-color: #f9faf9;"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage" v-if="imgList.length<4" style="background-color: #f9faf9;">
					<text class='cuIcon-cameraadd'></text>
				</view>
				
			</view>
		</view>
		<view
			style="width: 100%;display: flex; align-items: center;height: 40rpx; margin-left: 30upx; margin-right: 30upx;">
			<image :src="isChecked ? imgSrc : imgUnSelSrc" style="width: 40rpx;height: 40rpx; ;" @tap="changeCheckType"></image>
			<text style="">您是否选择实名提交，匿名提交将收不到回复！</text>
		</view>
		<!-- <view class="padding flex flex-direction">
			<button class="cu-btn bg-grey lg">提交</button>
		</view> -->
		<view class="padding flex flex-direction padding-lr-xl">
			<button class="cu-btn round lg bg-blue">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: '请选择时间',
				index: -1,
				imgList: [],
				isChecked: false,
				imgSrc: "https://mp-eb08f59e-b635-43fb-81b2-8ff3f5ccee36.cdn.bspapp.com/cloudstorage/a24dc57a-baef-47ef-8ede-ab21dbeaa7b7.png",
				imgUnSelSrc: "https://mp-eb08f59e-b635-43fb-81b2-8ff3f5ccee36.cdn.bspapp.com/cloudstorage/4e34553a-d0f3-474a-b96b-3aee6ef0a338.png",
				modalName:""
			}
		},
		methods: {
			changeCheckType() {
				this.isChecked = !this.isChecked;
			},
			ChooseImage(e){
				console.log("上传图片");
			},
			ViewImage(e){
				console.log("查看图片");
			}
		}
	}
</script>

<style>
page {
	background-color: white;
}
</style>
